<template>
	<view class="card-container" @click="goUrl('/pages/orderDetail/index')">
		<view class="header">
			<view>
				<orderType :value="orderInfo.orderType"></orderType>
			</view>
			<view class="order-remark">{{orderInfo.remark}}</view>
			<view class="order-price">￥{{orderInfo.amount}}</view>
		</view>
		<view class="tags">
			<view class="tag orange">{{formateTime(orderInfo.requireTime)}}前送达</view>
			<view class="tag gray">{{translateSex((orderInfo.sexLimit))}}</view>
		</view>
		<view class="bottom">
			<view class="address">
				<view>
					<image class="source" src="../static/img/source_address.png"></image>
					<text>{{orderInfo.sourceAddress || '--'}}</text>
				</view>
				<view>
					<image class="target" src="../static/img/target_address.png"></image>
					<text>{{orderInfo.targetAddress || '--'}}</text>
				</view>
			</view>
			<u-button class="help-button" shape="circle" :text="translateOrderType(orderInfo.status).desc"
				:class="translateOrderType(orderInfo.status).class" color="white"></u-button>
		</view>
	</view>
</template>

<script>
	import orderType from './orderType.vue'
	import store from '../store/index.js'
	export default {
		components: {
			orderType
		},
		name: "orderCard",

		data() {
			return {
				userInfo: this.$store.getters?.userInfo?.userInfoDetail || null
			};
		},

		props: {
			orderInfo: {}

		},
		methods: {
			formateTime(value) {
				return this.$moment(value).format('YYYY-MM-DD HH:mm')

			},
			translateOrderType(value) {
				let orderType = {
					desc: '',
					class: ''
				}
				//订单状态：0:待接单，1:已接单，2:已完成，3:已取消

				switch (value) {
					case 0:
						if (this.userInfo && this.userInfo.uid === this.orderInfo.uid) {
							orderType.desc = '取消帮单'
						} else {
							orderType.desc = '马上帮忙'
						}
						orderType.class = "waiting"
						break;
					case 1:
						orderType.desc = '帮忙中'
						orderType.class = "helping"
						break;
					case 2:
						orderType.desc = '已完成'
						orderType.class = "completed"
						break;
					case 3:
						orderType.desc = '已取消'
						orderType.class = "canceled"
						break;

				}
				return orderType
			},
			translateSex(value) {
				console.log(value)
				// 性别限制：0:不限性别 1:限男生 2:限女生
				let desc = ''
				switch (value) {
					case 0:
						desc = '不限性别'
						break;
					case 1:
						desc = '只限男生'
						break;
					case 2:
						desc = '只限女生'
						break;


				}
				return desc
			},
			goUrl(url, e) {
				let token = ''

				if (store.getters.userInfo) {
					token = store.getters.userInfo.token
				}


				if (!token) {
					uni.navigateTo({
						url: '/pages/login/index'
					})

				} else {

					uni.navigateTo({
						url: url + '?orderDetail=' + JSON.stringify(this.orderInfo),
					})
				}
			},

		},
	}
</script>

<style lang="scss">
	.card-container {
		background: #fff;
		display: flex;
		padding: 15px;
		flex-wrap: wrap;
		flex-direction: column;
		border-radius: 8px;

		.header {
			display: flex;
			align-items: center;


			.order-remark {
				width: calc(100% - 80px);
				height: 22px;
				color: rgb(51, 51, 51);
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: normal;
				margin-right: 8px;
				line-height: 22px;
			}


			.order-price {
				color: rgb(255, 104, 83);
				font-size: 16px;
				font-weight: 400;
				line-height: 20px;
			}
		}

		.tags {
			display: flex;
			font-size: 12px;
			margin: 8px 0 14px 52px;

			.tag {
				padding: 2px 8px;
				height: 22px;
				border-radius: 4px;
				line-height: 22px;
				margin-right: 4px;

				&.orange {
					color: rgb(249, 161, 79);
					background: rgba(244, 154, 43, 0.1);
				}

				&.gray {
					color: rgb(153, 153, 153);
					background: rgb(242, 242, 242);
				}
			}
		}

		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: relative;

			.address {
				width: calc(100% - 108px);
				padding-right: 20px;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				color: rgb(153, 153, 153);
				font-size: 12px;

				uni-view {
					display: flex;
					align-items: center;

					&:first-child {
						margin-bottom: 10px;
					}
				}

				.source,
				.target {
					width: 16px;
					height: 16px;
					margin-right: 10px;
				}
			}

			.help-button {
				width: 88px;
				height: 24px;
				background: linear-gradient(135.00deg, rgba(118, 118, 238, 1.00) 0.321%, rgba(138, 138, 238, 1.00) 100%);
				border-radius: 12px;
				color: rgb(255, 255, 255);
				font-size: 14px;
				line-height: 24px;
				text-align: center;
				bottom: 0;
				position: absolute;
				right: 0;


				&.helping {
					border: 1px solid #6584f7 !important;
					border-radius: 12px;
					background: transparent;
					color: #6584f7 !important;
				}

				&.canceled {
					border: 1px solid #999999 !important;
					border-radius: 12px;
					background: transparent;
					color: #999999 !important;
				}

				&.completed {
					border: 1px solid #41B093 !important;
					border-radius: 12px;
					background: transparent;
					color: #41B093 !important;
				}
			}
		}
	}
</style>